<template>
    <div
        class="group-card-wrapper"
        :class="`type-${type}`">
        <div class="card-title">{{ title }}</div>
        <com-search
            v-if="useSearch"
            :placeholder="placeholder"
            v-model="newSearchVal"
            @triggerSearch="hanldeSearch" />
        <div class="card-container">
            <slot />
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "left", //left || right
  },
  useSearch: {
    type: Boolean,
    default: false,
  },
  placeholder: String,
  searchVal: String
});

const emits = defineEmits(['triggerSearch', 'update:searchVal'])

const newSearchVal = computed({
  get() {
    return props.searchVal
  },
  set(val) {
    emits('update:searchVal', val)
  }
})

const hanldeSearch = (val) => {
  emits('triggerSearch', val)
}
</script>

<style scoped lang="scss">
.group-card-wrapper {
  pointer-events: all;
  width: 472px;
  height: auto;
  // min-height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(200deg, rgba(0, 0, 0, .4) 0%, rgba(0,0,0,0) 100%);
    // background-color: rgba(0, 0, 0, .1);
    // filter: blur(8px);
    backdrop-filter: blur(4px);
    z-index: -1;
  }
  &.type-left {
    &::before {
      background: linear-gradient(150deg, rgba(0, 0, 0, .4) 0%, rgba(0,0,0,0) 100%);
    }
  }

  // background: linear-gradient(
  //   127deg,
  //   rgba(255, 255, 255, -17.75) -67%,
  //   rgba(0, 0, 0, 0.4) 84%
  // );
  .card-title {
    height: 47px;
    width: 100%;
    // display: flex;
    // align-items: center;
    box-sizing: border-box;
    line-height: 40px;
    padding-left: 48px;
    font-size: 20px;
    font-family: PangMenZhengDao;
    background: url(@/assets/images/group_title_bg.png) no-repeat center
      left/auto 100%;
  }


  .card-container {
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;

  }
}
</style>
